<template>
  <div>
    <!--    顶部文档，所有页面均需要-->
    <div class="top_bar">
      <div class="top_bar_mid">
        <ul class="top_bar_mid_ul_left">
          <li class="top_pull_down">
            {{ this_address }}
            <i class="el-icon-arrow-down"></i>
            <div class="top_pull_down_box">
              <span
                class="top_pull_down_box_span"
                @click="on_address_change(addr)"
                v-for="(addr, index) in address"
                :key="index"
                >{{ addr }}</span
              >
            </div>
          </li>
          <li v-show="!login_status">哇卡拉卡，欢迎来到小白</li>
          <li v-show="login_status" class="top_pull_down user_name">
            {{ user_name }}
            <!--            <i class="el-icon-arrow-down"></i>-->
            <div class="top_pull_down_box user_login_box">
              <div class="top_pull_down_box_user_login_box">
                <img src="../assets/images/logo/xiaobaishop_1.jpg" />
                <div class="top_pull_down_box_user_login">
                  <div class="top_pull_down_box_user_login_nav">
                    <router-link to="pscenter/userinfo">个人中心</router-link>
                    <span>|</span>
                    <a href="#">退出</a>
                  </div>
                </div>
              </div>
              <div class="top_pull_down_box_bottom">
                <a href="#">查看你的专属权益</a>
              </div>
            </div>
          </li>
          <li>
            <router-link to="/">小白商城首页</router-link>
          </li>
        </ul>

        <ul class="top_bar_mid_ul_right">
          <router-link to="/index/customerService/mymsg"
            target="_blank"><li>我的消息</li></router-link
          >

          <li>
            <router-link to="/like">收藏夹</router-link>
          </li>
          <li>
            <router-link to="/shopcar">购物车</router-link>
          </li>
          <li>卖家中心</li>
          <li>
            <router-link to="/index/customerService">联系客服</router-link>
          </li>
          <li>关于我们</li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";

export default {
  data() {
    return {
      login_status: true,
      user_name: "猛踹瘸子那条好腿",
      this_address: "中国大陆",
      address: [
        "北京",
        "上海",
        "深圳",
        "广州",
        "杭州",
        "南京",
        "苏州",
        "成都",
        "重庆",
        "天津",
        "武汉",
        "西安",
        "长沙",
        "郑州",
        "青岛",
        "济南",
        "大连",
        "福州",
        "厦门",
        "沈阳",
        "宁波",
        "无锡",
        "合肥",
        "石家庄",
        "昆明",
        "南昌",
        "南宁",
        "乌鲁木齐",
        "兰州",
        "西宁",
        "贵阳",
        "拉萨",
        "呼和浩特",
        "银川",
        "乌海",
        "海口",
        "三亚",
        "嘉峪关",
        "香港",
        "澳门",
      ],
    };
  },
  computed: {
    ...mapState({
      users: (state) => state.user,
    }),
  },
  created() {
    this.checkUserLoginStatus();
  },
  methods: {
    checkUserLoginStatus() {
      const userStatus = this.users.apply();
      if (userStatus.length == 0) {
        /**
         * 用户未登录
         */
        console.log("用户未登录");
      } else {
        console.log(userStatus);
        // ajax
      }
    },
    on_address_change(addr) {
      this.this_address = addr;
    },
  },
};
</script>

<style scoped>
.top_pull_down_box_bottom:hover {
  text-decoration: underline;
}

.top_pull_down_box_bottom a {
  text-align: center;
  line-height: 30px;
  font-size: 12px;
  color: #442f1a !important;
}

.top_pull_down_box_bottom {
  width: calc(100% - 20px);
  margin: 2px auto;
  height: 30px;
  background-color: #958a7e50;
  border: 1px solid #442f1a;
  border-radius: 3px;
  text-indent: -70px;
}

.user_login_box {
  background-color: #ffffff !important;
}

.top_pull_down_box_user_login_nav span {
  margin-right: 10px;
}

.top_pull_down_box_user_login_nav a:hover {
  color: #442f1a;
  text-decoration: underline;
}

.top_pull_down_box_user_login_nav a {
  color: #442f1a !important;
  margin-right: 10px;
}

.top_pull_down_box_user_login_nav {
  width: 100%;
  height: 30px;
  text-align: right;
  color: #442f1a !important;
}

.top_pull_down_box_user_login {
  width: calc(100% - 90px);
  height: 80px;
  float: left;
}

.top_pull_down_box_user_login_box img {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  margin: 10px 10px;
  float: left;
  border: 2px solid #958a7e;
}

.top_pull_down_box_user_login_box {
  width: 100%;
  height: 80px;
}

.top_bar_mid_ul_right {
  float: right;
}

.top_bar_mid_ul_left li,
.top_bar_mid_ul_right li {
  transition-duration: 0.3s;
}

.top_bar_mid_ul_left li:hover {
  background-color: #442f1a50;
}

.top_bar_mid_ul_right li:hover {
  background-color: #442f1a50;
}

.top_bar_mid_ul_left a:hover {
  color: #e4e7ed;
}

.top_bar_mid_ul_left a {
  color: #e4e7ed;
}

.top_bar_mid_ul_left {
  float: left;
}

.top_pull_down_box_span {
  width: auto;
  padding-left: 5px;
  padding-right: 5px;
  height: 30px;
  line-height: 30px;
  display: block;
  float: left;
  font-size: 12px;
}

.top_pull_down_box {
  width: 230px;
  height: 120px;
  overflow: auto;
  position: absolute;
  display: none;
  margin-left: -5px;
  margin-top: -2px;
  background-color: #805932;
  border: 2px solid #958a7e;
  z-index: 100;
}

.top_pull_down i {
  transition-duration: 0.3s;
}

.top_pull_down:hover {
  background-color: #e4e7ed;
}

.top_pull_down {
  transition-duration: 0.3s;
}

.top_pull_down:hover .top_pull_down_box {
  display: block;
}

.top_pull_down:hover {
  background-color: #442f1a50;
  color: #e4e7ed;
}

.top_pull_down:hover i {
  transform: rotate(180deg);
}

.top_bar_mid li a {
  color: #e4e7ed;
}

.top_bar_mid li {
  width: auto;
  padding-left: 5px;
  padding-right: 5px;
  text-align: center;
  height: 100%;
  font-size: 12px;
  color: #e4e7ed;
  line-height: 30px;
  margin-right: 10px;
  cursor: pointer;
  float: left;
}

.top_bar_mid {
  width: 1200px;
  height: 100%;
  margin: 0 auto;
}

.top_bar {
  width: 100%;
  height: 30px;
  background-color: #958a7e;
}
</style>
